﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>商品列表—易购触屏版</title>  
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./mui/css/mui.css">
    <link rel="stylesheet" href="./mui/css/icons-extra.css">      
</head>

<body>
    <div id="app">
        <!-- 公用头部 -->
        <nav class="nav">
            <a class="goback" href="javascript:history.back(1)">
                <span class="mui-icon mui-icon-undo"></span>
            </a>
            <div class="nav-title">购物车列表</div>
        </nav>
        <!-- 页面主体 -->
        <section class="mui-card" id="mylayout">
            <div class="mui-card-content">
                <!-- 使用v-for遍历 -->
                <div class="mui-card-content-inner flex" id="cart">
                    
                </div>
            </div>
            <div class="mui-card" id="total">
            </div>
        </section>
        <!-- 公用尾部 -->
        <footer class="footer">
            <a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-personadd"></span>
                <span class="mui-tab-label">分类</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart current"></span>
                <span class="mui-tab-label current">购物车</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">我的</span>
            </a>
        </footer>
    </div>
</body>
</html>
<script src="./js/axios.min.js"></script>
<script>
    let totalPrice=0;
    let count=0;
    axios.post('http://localhost:8090/h3/cart/list',{id:1})
    .then(res=>{
        console.log(res.data);
        let list=res.data.cart
        for(let i in list){
            let div=`
            <div class="mui-input-row mui-checkbox mui-left">
                        <label>&nbsp;</label>
                        <input type="checkbox" checked/>
                    </div>
                    <img src="${list[i].imagePath}">
                    <div class="info">
                        <h1>${list[i].title}</h1>
                        <div class="flex-num">
                            <span class="price">¥${list[i].price}</span>
                            <div class="mui-numbox" data-numbox-min='0'>
                                <!-- "-"按钮，点击可减小当前数值 -->
                                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                                <input class="mui-numbox-input" type="number" value="${list[i].quantity}"/>
                                <!-- "+"按钮，点击可增大当前数值 -->
                                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                            </div>
                            <a href="#">删除</a>
                        </div>
                    </div>`
                    cart.innerHTML+=div
                    totalPrice+=list[i].price*list[i].quantity
                    count+=list[i].quantity
        }
        let total=document.getElementById('total')
        total.innerHTML=`
        <div class="mui-card-content">
                  <div class="mui-card-content-inner balance">
                    <div class="left">
                      <p>总计不含运费</p>
                      <p>
                        已勾选商品
                        <span class="red">${count}</span> 件，总价
                        <span class="red">¥${totalPrice}</span>
                      </p>
                    </div>
                    <button class="mui-btn mui-btn-warning">去结算</button>
                  </div>
                </div>
        `
    })
  </script>